<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* @media screen and (-webkit-min-device-pixel-ratio: 2) {
        #demo {
          background-image: url('./imgs/logo@2x.png');
        }
      } */

      .box {
        width: 200px;
        height: 200px;
        background-size: 100%;
      }
      .img {
        background-image: url('imgs/logo.png');
      }

      @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .img {
          background-image: url('./imgs/logo@2x.png');
        }
      }
      @media screen and (-webkit-min-device-pixel-ratio: 3) {
        .img {
          background-image: url('./imgs/logo@3x.png');
        }
      }
      /* .img2 {
        background-image: url('imgs/logo@2x.png');
      } */
    </style>
  </head>
  <body>
    <!-- 
        1.移动端背景知识: 
        
        屏幕尺寸: 屏幕对角线(单位是英寸)
        屏幕分辨率: ip6(750*1334) 指屏幕上有多少个物理像素点
        物理像素: 屏幕上一个发光的元器件
        css像素: 程序员写的px值
        设备独立像素: 决定了一个css像素被几个物理像素渲染 (ip6=> 375*667)
        像素比: 设备分辨率的宽度 / 设置独立像素的宽度 



        2. 图片相关知识:
        图片分为两类: 

            位图: 是由位图像素组成,一个位图画出来之后,位图像素就固定了(.png,.jpg,.gif) 注意: 位图像素在计算时,当做css像素去计算就可以

            优缺点: 制作色彩丰富线条多的图片时,制作成本低. 但是会失真(模糊)

            位图会失真的原因: 一个位图像素被多个物理像素渲染了. 想不失真,就让一个物理像素渲染一个位图像素

        矢量图: 是动态画(计算)出来的 (.svg)

            优缺点: 不会失真(不会模糊), 制作色彩丰富线条多的图片时相对位图成本高




     -->

    <!-- <img src="./imgs/pro.jpg" alt="" />
    <img src="./imgs/微信.svg" alt="" /> -->
    <div class="box img"></div>
  </body>
</html>
